<template>
    <div class="branchtask">
        <div style="display: flex;justify-content: space-between;">
            <div>
                <el-input clearable v-model="sreach.keyword" style="width: 185px;" placeholder="输入任务名称/姓名查询" size="small" />
                <el-select v-model="sreach.fid" placeholder="请选择" size="small">
                    <el-option v-for="item in groupsList" :key="item.value" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
                <el-button type="primary" size="small" @click="todoSearch">搜索</el-button>
            </div>
            <div>
                <el-button type="primary" size="small" icon="el-icon-plus" @click="addTask"
                    v-if="isLeader == 1">安排任务</el-button>
            </div>
        </div>

        <!-- 安排任务 -->
        <taskDialog :dialogForm="dialogForm" @cancel="cancel" :taskId="taskId" @submitTask="submitTask"></taskDialog>

        <performanceLog :dialogForm="dialogForm2" :id="id" @cancel="cancel"></performanceLog>

        <div style="margin-bottom: 35px" v-for="item in taskUserList" :key="item.id">
            <div class="taskTile">
                <!-- <div class="class_taskTile_left"> -->
                <h3>{{ item.name }}</h3>
                <div>{{ item.deptName }}</div>
                <!-- </div> -->
            </div>
            <el-table :data="item.taskInfos" border style="width: 100%" :row-class-name="tableRowClassName">
                <el-table-column type="index" label="序号" width="100" align="left" fixed="left">
                </el-table-column>
                <el-table-column prop="taskName" label="任务名称" width="300" align="left">
                    <template slot-scope="scope">
                        <i class="el-icon-warning"
                            :class="{ 'red': scope.row.urgentState == 1, 'yellow': scope.row.urgentState == 2, 'green': scope.row.urgentState == 3 }"></i>
                        <span :class="{ 'decoration': scope.row.state == 5 }">{{ scope.row.taskName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="类型">
                    <template slot-scope="scope">
                        <span>
                            {{ scope.row.category == 1 ? '限时任务' : '周期任务' }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="状态">
                    <template slot-scope="scope">
                        <el-tag size="medium" :type="
                            scope.row.state == 1 ? 'danger' :
                                scope.row.state == 2 ? 'warning' :
                                    scope.row.state == 3 ? 'success' :
                                        scope.row.state == 4 ? '' :
                                            scope.row.state == 5 ? 'info' : ''">
                            {{
                                scope.row.state == 1 ? '已延期' :
                                scope.row.state == 2 ? '即将到期' :
                                    scope.row.state == 3 ? '未到期' :
                                        scope.row.state == 4 ? '已暂停' :
                                            scope.row.state == 5 ? '已完成' : ''
                            }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="projectName" label="关联项目" align="left">
                </el-table-column>
                <el-table-column label="截止时间">
                    <template slot-scope="scope">
                        {{ scope.row.endDate.substring(0, 16) }}
                    </template>
                </el-table-column>
                <el-table-column prop="userName" label="责任人" align="left">
                </el-table-column>
                <el-table-column prop="categoryName" label="其他参与人" align="left">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="420">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row.id)" type="primary" size="small" plain>查看详情</el-button>
                        <el-button @click="okClick(scope.row.id)" type="primary" size="small" plain
                            v-if="scope.row.completedFlag == 0 && scope.row.completedStateFlag == 1">完成情况</el-button>
                        <el-button type="primary" size="small" plain @click="editCompletedFlag(scope.row.id)"
                            v-if="scope.row.confirmShowFlag == 1 && scope.row.completedFlag == 0">已完成</el-button>
                        <el-button :type="scope.row.startFlag == 1 ? 'success' : 'warning'" size="small" plain
                            @click="editStartFlag(scope.row.id, scope.row.startFlag)"
                            v-if="scope.row.stopShowFlag == 1 && scope.row.completedFlag == 0">
                            {{
                                scope.row.startFlag == 1 ? '开启' : '暂停'
                            }}</el-button>
                        <el-button type="danger" size="small" plain
                            v-if="scope.row.deleteShowFlag == 1 && scope.row.deleteFlag == 0"
                            @click="editDeleteFlag(scope.row.id, scope.row.deleteFlag)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script>
import { subordinateTask, stopOrDeleteTaskInfo, completeTaskInfo } from '@/service/taskApi.js'
import {
    selectFunctionGroupLists,
} from "@/service/Api.js";
import taskDialog from "./components/taskDialog.vue"
import performanceLog from "./components/performanceLog.vue"
export default {
    components: { taskDialog, performanceLog },
    data() {
        return {
            sreach: {
                keyword: "",
                fid: "",
            },
            groupsList: [],
            taskUserList: [],
            dialogForm: {
                dialogVisible: false,
                title: '',
                width: '40%'
            },
            dialogForm2: {
                dialogVisible: false,
                title: '',
                width: '25%'
            },
            tableData: [],
            taskId: '',
            userid: '',
            id: '',
            isLeader: '',
            endDate: "",
        }
    },
    created() {
        let userInfo = sessionStorage.getItem("userInfo");
        this.userid = JSON.parse(userInfo).id;
        this.isLeader = JSON.parse(userInfo).isLeader;
        this.groups()
    },
    methods: {
        tableRowClassName({ row }) {
            if (row.state === 5) {
                return 'completedFlag-row';
            }
            return '';
        },
        //获取职能组列表
        groups() {
            let userInfo = sessionStorage.getItem("userInfo");
            let id = JSON.parse(userInfo).id;
            selectFunctionGroupLists(id).then((res) => {
                if (res.code == 0) {
                    this.groupsList = res.data;
                    let f;
                    let arr = [];
                    res.data.forEach(item => {
                        arr.push(item.id);
                        f = arr.join(",")
                    })
                    let list = [
                        {
                            id: f,
                            name: "所有职能组",
                        },
                    ];
                    list.push(...res.data);
                    this.groupsList = list;
                    if (res.data.length > 0) {
                        let userInfo = sessionStorage.getItem("userInfo");
                        if (JSON.parse(userInfo).fid == 0) {
                            this.sreach.fid = f;
                        } else {
                            this.sreach.fid = JSON.parse(userInfo).fid;
                        }
                    }
                    this.getDataList();
                }
            });
        },
        todoSearch() {
            this.getDataList()
        },
        addTask() {
            this.taskId = ''
            this.dialogForm.title = '安排任务'
            this.dialogForm.dialogVisible = !this.dialogForm.dialogVisible
        },
        submitTask() {
            this.dialogForm.dialogVisible = !this.dialogForm.dialogVisible
            this.getDataList()
        },
        cancel() {
            this.dialogForm.dialogVisible = !this.dialogForm.dialogVisible
        },
        getDataList() {
            let data = {
                fids: this.sreach.fid,
                keyword: this.sreach.keyword
            }
            subordinateTask(data).then(res => {
                if (res.code == 0) {
                    this.taskUserList = res.data
                } else {
                    this.$message({
                        message: res.message,
                        type: 'error'
                    });
                }
            })
        },
        handleClick(val) {
            this.taskId = val
            this.dialogForm.title = '任务详情'
            this.dialogForm.dialogVisible = !this.dialogForm.dialogVisible
        },
        okClick(taskId) {
            this.id = taskId
            this.dialogForm2.title = '完成详情'
            this.dialogForm2.dialogVisible = !this.dialogForm2.dialogVisible
        },
        editCompletedFlag(val) {
            this.$confirm(`任务是否已完成?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                completeTaskInfo({ id: val, confirmState: 1 }).then(res => {
                    if (res.code == 0) {
                        this.$message({
                            type: 'success',
                            message: `已完成`
                        });
                        this.getDataList();
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        editStartFlag(id) {
            let text
            let flag
            if (flag == 1) {
                text = '开启'
                flag = 0
            } else {
                text = '暂停'
                flag = 1
            }
            this.$confirm(`是否${text}此任务?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                stopOrDeleteTaskInfo({ id: id, startFlag: flag }).then(res => {
                    if (res.code == 0) {
                        this.$message({
                            type: 'success',
                            message: `已${text}`
                        });
                        this.getDataList();
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });

        },
        editDeleteFlag(id) {
            this.$confirm(`是否删除此任务?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                stopOrDeleteTaskInfo({ id: id, deleteFlag: 1 }).then(res => {
                    if (res.code == 0) {
                        this.$message({
                            type: 'success',
                            message: `删除成功`
                        });
                        this.getDataList();
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
    },
}
</script>
<style lang="scss" scoped>
.taskTile {
    display: flex;
    align-items: center;
    margin: 10px 0px 0px 0px;
    padding: 0 10px;
    border: 1px solid #e8eef5;
    background: #f9f9f9;
    border-bottom: 0px;
    height: 50px;

    h3 {
        line-height: 50px;
        margin-right: 15px;
        font-size: 24px;
    }
}

.red {
    color: red;
}

.yellow {
    color: rgb(255, 179, 0);
}

.green {
    color: green;
}

.decoration {
    text-decoration: line-through
}
</style>
<style>
.el-table .completedFlag-row {
    background: rgb(214, 214, 214);
}
</style>